<!DOCTYPE html>
<html>
<head>
	<title>img上传</title>
</head>
<body>
	<input type="file" name="">
	<button>send</button>

	<form method="post" enctype="multipart/form-data" action="/upload">
	    <input type="file" name="photo" name="file">
	    <input type="submit" value="Submit">
	</form>
</body>
<script type="text/javascript">
	var file, compressedFile;
	function compressImg(img, type){
		var canvas = document.createElement("canvas"),
			ctx = canvas.getContext('2d');
		var tcanvas = document.createElement('canvas'),
			tctx = tcanvas.getContext('2d');
			var initSize = img.src.length;
			var width = img.width;
			var height = img.height;
			var ratio;
			// 强制压缩图片为手机大小先
			if((ratio = width / window.innerWidth) > 1) {
				// ctx的width已经是压缩过的了
				width /= ratio;
				height /= ratio;
			} else ratio = 1;
			canvas.width = width;
			canvas.height = height;
			ctx.fillStyle = "#fff";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			ctx.drawImage(img, 0, 0, width, height);
			// 进行压缩
			var ndata;
			ndata = canvas.toDataURL('image/jpeg', 0.1);

	        // 将base64的图片转成二进制对象
	        var ndata2 = ndata.split(',')[1];
	        ndata2 = ndata2.replace(/\s/g, '');
	        var text = atob(ndata2)

	        var buffer = new ArrayBuffer(text.length);
	        var ubuffer = new Uint8Array(buffer);

	        for (var i = 0; i < text.length; i++) {
	            ubuffer[i] = text.charCodeAt(i);
	        }

	        var blob = new Blob([buffer], {type: type});
	        blob.lastModifiedDate = new Date();
	        return blob;
	}

	var input = document.querySelector('input');
	input.onchange = function(){
		file = input.files[0];
		console.log(file)
		var img = new Image();
		img.src = window.URL.createObjectURL(file);
		img.onload = function(){
			compressedFile = compressImg(img, file.type);
		}
	}
	document.querySelector('button').onclick = function(){
		console.log('initial:' +　file.size +';compressed:' + compressedFile.size);
		var fm = new FormData();
		fm.append('photo', compressedFile, 'lll.jpg');
		var xhr = new XMLHttpRequest();
		xhr.open('post','/upload', true);
		xhr.onreadystatechange = function() {
			if(xhr.readyState == 4 && xhr.status == 200) {
				console.log(xhr.responseText)
			}
		}
		xhr.send(fm);
	}
</script>
</html>